<template>
  <div class="list">
    <Row class="padding-tb">
      <Button type="primary" @click="showAdd = true">添加</Button>
    </Row>
    <Table border ref="selection" :columns="columns" :data="users">
      <template #url='{row}'>
        <Image :src="row.url" fit= "fit" width="250px" :preview="true" :preview-list="[row.url]" />
      </template>
      <template #showIndex='{row}'>
        <Switch v-model="row.is_index_show" size="large">
                <template #open>
                  <span>首页</span>
                </template>
                <template #close>
                  <span>关闭</span>
                </template>
            </Switch>
      </template>
    </Table>
    <!-- 编辑页面 -->
    <Edit
      v-if="showModel"
      :user="editUser"
      @closeEdit="showModel = false"
    ></Edit>
    <!-- 添加页面 -->
    <Add v-if="showAdd" @closeAdd="showAdd = false"></Add>
  </div>
</template>
<script>
import { resolveComponent } from "vue";
import { list, del } from "@/api/goodsCate";
// import Edit from "./Edit";
import Add from "./Add";
export default {
  name: "gCateList",
  components: {  Add },//Edit,
  data() {
    return {
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "分类名",
          key: "name",
        },
        {
          title: "分类图",
          key: "url",
          slot:"url"
        },
        {
          title: "排序",
          key: "sort",
        },
        {
          title: "首页显示",
          key: "is_index_show",
          slot:"showIndex"
        },
        {
          title: "操作",
          width: 200,
          render: (h, params) => {
            return h(
              "div",
              {
                class: "option",
              },
              [
                h(
                  resolveComponent("Button"),
                  {
                    type: "primary",
                    onClick: () => {
                      this.editUser = params.row;
                      this.showModel = true;
                    },
                  },
                  {
                    default() {
                      return "编辑";
                    },
                  }
                ),
                h(
                  resolveComponent("Button"),
                  {
                    type: "error",
                    onClick: () => {
                      this.deleteUser(params.row._id, params.index);
                    },
                  },
                  {
                    default() {
                      return "删除";
                    },
                  }
                ),
              ]
            );
          },
        },
      ],
      users: [],
      showModel: false,
      editUser: null,
      showAdd: false,
    };
  },
  created() {
    list().then((res) => {
      if (res.data.errCode == 0) {
        this.users = res.data.data;
      }
    });
  },
  methods: {
    deleteUser(_id, index) {
      del(_id).then((res) => {
        if (res.data.errCode == 0) {
          this.users.splice(index, 1);
          this.$Notice.success({
            title: "删除成功",
          });
        } else {
          this.$Notice.error({
            title: "未知原因删除失败",
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.list {
  width: 100%;
  margin: 0 10px;
  padding: 10px;
  background: #fff;
  margin-top: 50px;
}
.padding-tb{
  padding-bottom: 10px;
}
.option button{
  margin-right: 10px;
}
</style>